<!--
 * @Descripttion: 订单详情(查看)弹框
 * @version: v1.0.0
 * @Author: wang pingqi
 * @Date: 2021-04-27 09:27:01
 * @LastEditors: wang pingqi
 * @LastEditTime: 2022-04-29 14:03:30
-->
<template>
  <KiFormDialog
    :show.sync="row__.show"
    title="查看订单"
    v-model="row__.data"
    :readonly="row__.status === 'r'"
    ref="formDialog"
  >
    <template #el-form>
      <!-- <div>{{ row__.data }}</div> -->
      <h2>基础信息</h2>
      <preview-table v-if="row__.data">
        <tr>
          <td>订单ID</td>
          <td>{{ row__.data.orderId }}</td>
          <td>订单状态</td>
          <td>{{ row__.data.orderStatusName }}</td>
        </tr>
        <tr>
          <td>订单金额</td>
          <td>¥ {{ row__.data.totalAmount | $cent2yuan }}</td>
          <td>最后修改时间</td>
          <td>{{ row__.data.updateTime }}</td>
        </tr>
        <tr>
          <td>取消条款</td>
          <td>
            <span v-if="row__.data.attribute">
              {{ row__.data.attribute.refundTypeName }}
            </span>
          </td>
          <td>允许取消截止时间</td>
          <td>
            <span v-if="row__.data.attribute">
              {{ row__.data.attribute.refundTime }}
            </span>
          </td>
        </tr>
        <tr>
          <td>平台手续费</td>
          <td>
            <span v-if="row__.data.platformCommission >= 0">
              ¥ {{ row__.data.platformCommission | $cent2yuan }}
            </span>
          </td>
          <td>支付手续费</td>
          <td>
            <span v-if="row__.data.payCommission >= 0">
              ¥ {{ row__.data.payCommission | $cent2yuan }}
            </span>
          </td>
        </tr>
      </preview-table>

      <h2>入住信息</h2>
      <preview-table v-if="row__.data">
        <tr>
          <td>酒店名称</td>
          <td>{{ row__.data.hotelName }}</td>
          <td>房型名称</td>
          <td>{{ row__.data.roomTypeName }}</td>
        </tr>
        <tr>
          <td>产品名称</td>
          <td>{{ row__.data.roomName }}</td>
          <td>早餐数量</td>
          <td>
            <span v-if="row__.data.attribute">{{
              row__.data.attribute.breakFastNum
            }}</span>
          </td>
        </tr>
        <tr>
          <td>入住时间</td>
          <td>{{ row__.data.useStartTime }}</td>
          <td>离店时间</td>
          <td>{{ row__.data.useEndTime }}</td>
        </tr>
        <tr>
          <td>预订人姓名</td>
          <td>{{ row__.data.contactName }}</td>
          <td>联系电话</td>
          <td>{{ row__.data.contactPhone }}</td>
        </tr>
        <tr>
          <td>入住人姓名</td>
          <td>{{ formatPersons(row__.data.persons) }}</td>
          <td></td>
          <td></td>
        </tr>
      </preview-table>

      <h2>间夜信息</h2>
      <el-table
        v-if="row__.data && row__.data.nightInfoList"
        :data="row__.data.nightInfoList"
        border
      >
        <el-table-column label="间夜日期" prop="nightDate" align="center" />
        <el-table-column label="单价" prop="sellPrice" align="center">
          <template slot-scope="{ row }">
            ¥ {{ row.sellPrice | $cent2yuan }}
          </template>
        </el-table-column>
        <el-table-column label="数量" prop="quantity" align="center" />
      </el-table>

      <h2>退款信息</h2>
      <preview-table v-if="row__.data && row__.data.refundApply">
        <tr>
          <td>退款ID</td>
          <td>
            <span v-if="row__.data.refundApply">
              {{ row__.data.refundApply.refundId }}
            </span>
          </td>
          <td>退款金额</td>
          <td>
            <span v-if="row__.data.refundApply">
              {{ row__.data.refundApply.refundAmount | $cent2yuan }}
            </span>
          </td>
        </tr>
        <tr>
          <td>取消原因</td>
          <td>
            <span v-if="row__.data.refundApply">
              {{ row__.data.refundApply.reason }}
            </span>
          </td>
          <td>退款时间</td>
          <td>
            <span v-if="row__.data.refundApply">
              {{ row__.data.refundApply.operateTime }}
            </span>
          </td>
        </tr>
      </preview-table>
      <div class="no-tip" v-else>暂无退款信息</div>
    </template>
  </KiFormDialog>
</template>

<script>
import previewTable from "@/components/preview-table";
export default {
  props: {
    form: {
      type: Object,
      required: true,
      default() {
        return {
          show: false,
          data: null,
          loading: false,
        };
      },
    }
  },
  components: { previewTable },
  data() {
    return {
      row__: this.form,
    };
  },
  watch: {
    "form.data.orderId": {
      handler(nv) {
        if (nv && this.form.show) {
          this.queryRefundInfo();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    /**
     * 获取订单详情数据
     * @return Void
     */
    queryRefundInfo() {
      this.$set(this.row__, "loading", true);
      this.$POST(`sot-admin-api/hotel/self-order/queryRefundInfo`, {
        id: this.form.data.orderId,
      })
        .then(({ data }) => {
          this.$set(this.row__.data, "refundApply", data);
        })
        .finally((_) => {
          this.$set(this.row__, "loading", false);
        });
    },
    /**
     * 格式化入住人姓名
     * @param {Array} list
     * @return {String}
     */
    formatPersons(list) {
      let arr = [];
      if (list && list instanceof Array && list.length > 0) {
        list.forEach((item) => {
          arr.push(item.name);
        });
        return arr.join("、");
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.form-dialog {
  .dialog-wrap {
    padding: 28px 28px 0;
  }
}
</style>
